<template>
    <div style="display: inline-block;overflow: hidden;" :style="{
        backgroundColor: backgroundColor,
        borderRadius: borderRadius,
        height: height,
        width: width
    }">
        <div :class="maskColor == 'black' ? 'buttonMask' : 'buttonMask2'"
            style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-family: hmr;word-break: keep-all;"
            :style="{
                color: color,
                fontSize: fontSize,
                padding: padding,
                justifyContent: textAlign
            }">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
    color: {
        type: String,
        default: 'black'
    },
    backgroundColor: {
        type: String,
        default: 'white'
    },
    padding: {
        type: String,
        default: '8px 16px'
    },
    fontSize: {
        type: String,
        default: '16px'
    },
    maskColor: {
        type: String,
        default: 'black'
    },
    borderRadius: {
        type: String,
        default: '3px'
    },
    width: {
        type: String,
        default: 'unset'
    },
    height: {
        type: String,
        default: 'unset'
    },
    textAlign: {
        type: String,
        default: 'center'
    }
})

onMounted(async () => {

})
</script>

<style scoped>
.buttonMask {
    background-color: transparent;
}

.buttonMask:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.buttonMask:active {
    background-color: rgba(0, 0, 0, 0.1);
}

.buttonMask2 {
    background-color: transparent;
}

.buttonMask2:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.buttonMask2:active {
    background-color: rgba(255, 255, 255, 0.1);
}
</style>